<template>
  <div class="nowHot-wrap">
    <div class="nowHot-wrap-box">
      <div class="nowHot-wrap-heard">
        <h2>正在热映</h2>
        <span>全部 ></span>
      </div>
      <div class="right-hot-all">
        <div class="nowHot-main">
          <div class="nowHot-main-div" v-for="(item, index) in homeOne" @click="details(item.id)">
            <div><img :src="item.image" alt="" /></div>
            <p>购票</p>
            <div class="nowHot-main-post">
              <span>{{ item.title1 }}</span>
              <i class="one">{{ item.num }}</i>
            </div>
          </div>
        </div>
        <nowright></nowright>
      </div>
    </div>
  </div>
</template>

<script>
import nowright from "../components/nowRight";
export default {
  props: ["homeOne"],
  name: "hots",
  data() {
    return {};
  },
  components: {
    nowright,
  },
  mounted() {},
  methods: {
    details(id){
      let urls = this.$router.resolve({
        path:'/movie/detail',
        query:{id:id}
      })
      window.open(urls.href,"_black")
    }
  },
};
</script>

<style lang="scss" scoped>
$zhuticolor: #ee4137;
.right-hot-all {
  display: flex;
}
.nowHot-wrap {
  margin-top: 90px;
  width: 100%;
  .nowHot-wrap-box {
    padding: 0 20px;
    width: 1200px;
    min-height: 500px;
    margin: 30px auto 130px auto;
    h2 {
      color: $zhuticolor;
      font-weight: 500;
    }
    .nowHot-wrap-heard {
      width: 730px;
      display: flex;
      justify-content: space-between;
      color: $zhuticolor;
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
    }
    .nowHot-main {
      width: 800px;
      min-height: 400px;
      /* background: $zhuticolor; */
      .nowHot-main-div:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        cursor: pointer;
      }
      .nowHot-main-div {
        transition: 0.1s all;
        border: 1px solid #e7e6e6;
        box-sizing: border-box;
        width: 160px;
        height: 260px;
        margin: 20px 30px 0 0;
        background: rgb(255, 255, 255);
        float: left;
        position: relative;
        .nowHot-main-post {
          position: absolute;
          bottom: 45px;
          color: rgb(255, 255, 255);
          font-size: 17px;
          .one {
            color: #ffb400;
          }
        }
        > div {
          img {
            width: 160px;
            height: 220px;
            opacity: 0.9;
          }
        }

        p {
          text-align: center;
          margin-top: 5px;
          color: $zhuticolor;
        }
      }
    }
  }
}
.right-wrap {
  width: 360px;
  min-height: 600px;
}
</style>
